<template>
    <div class="yorha-normal-btn-con">
        <div :class="{'active':active}">
            <div class="pointer">
                <img src="../../assets/icons/point.png">
            </div>
            <div class="btn-con">
                <div class="swing-top"></div>
                <div class="swing-bottom"></div>
                <button>
                    <div class="box"></div>
                    <span>
                    <slot></slot>
                </span>
                </button>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name:"YorhaButton",
    props:['active']
}
</script>

<style lang="less" scoped>
@import "../../style";
.yorha-normal-btn-con {
    width: 350px;
    height: 48px;
    display: inline-block;
    &>div {
        width: 350px;
        height: 48px;
        display: flex;
        &.active {
            &>.pointer {
                opacity: 1;
            }
            &>.btn-con {
                &>.swing-top {
                    top: 0;
                }
                &>.swing-bottom {
                    bottom: 0;
                }
                &>button {
                    box-shadow: none;
                    &::before {
                        width: 300px;
                    }
                    &>.box {
                        background: @white;
                    }
                    &>span {
                        font-size: medium;
                        color: @white;
                    }
                }
            }


        }
        &:hover {
            &>.pointer {
                opacity: 1;
            }
            &>.btn-con {
                &>button {
                    &::before {
                        width: 300px;
                        box-shadow: 2px 2px 0 @yellow;
                    }
                    &>.box {
                        background: @white;
                    }
                    &>span {
                        font-size: medium;
                        color: @white;
                    }
                }
            }
        }
        &>.pointer {
            width: 50px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            &>img {
                width: 30px;
                height: 30px;
            }
        }
        &>.btn-con {
            width: 300px;
            height: 48px;
            position: relative;

            &>.swing-top {
                width: 100%;
                top: 6px;
                height: 3px;
                position: absolute;
                background: @darkGray;
                z-index: -1;
                transition: top 100ms ease-in-out;
            }

            &>.swing-bottom {
                width: 100%;
                bottom: 6px;
                height: 3px;
                position: absolute;
                background: @darkGray;
                z-index: -1;
                transition: bottom 100ms ease-in-out;
            }

            &>button {
                width: 300px;
                height: 36px;
                margin: 6px 0;
                background: @darkYellow;
                border: none;
                outline: none;
                display: flex;
                justify-content: left;
                align-items: center;
                padding: 0;

                &::before {
                    content: '';
                    position: absolute;
                    top: 6px;
                    width: 0;
                    height: 36px;
                    background: @darkGray;
                    transition: width 200ms ease-in-out;
                    z-index: 0;
                }
                &>.box {
                    z-index: 1;
                    width: 20px;
                    height: 20px;
                    margin: 8px;
                    background: @darkGray;
                }
                &>span {
                    z-index: 1;
                    font-size: medium;
                    color: @darkGray;
                }
            }
        }
    }
}
</style>